import { useNavigate } from "react-router-dom";
import {
  AppstoreOutlined,
  BarChartOutlined,
  CloudOutlined,
  ShopOutlined,
  DashboardOutlined,
  TeamOutlined,
  UploadOutlined,
  UserOutlined,
  VideoCameraOutlined,
  MenuUnfoldOutlined,
  MenuFoldOutlined,
} from "@ant-design/icons";
import type { MenuProps } from "antd";
import { Layout, Menu } from "antd";
import React, { useState } from "react";

const { Header, Content, Footer, Sider } = Layout;

// const items: MenuProps["items"] = [
//   UserOutlined,
//   VideoCameraOutlined,
//   UploadOutlined,
//   BarChartOutlined,
//   CloudOutlined,
//   AppstoreOutlined,
//   TeamOutlined,
//   ShopOutlined,
// ].map((icon, index) => ({
//   key: String(index + 1),
//   icon: React.createElement(icon),
//   label: `nav ${index + 1}`,
// }));
// 表示侧边栏的数据
const items: MenuProps["items"] = [
  {
    key: "/admin", // 唯一值
    icon: React.createElement(DashboardOutlined), // 图标
    label: "看板", // 显示的文字
    // title: "商品列表", // 收缩之后的悬浮数据
  },
  {
    key: "/admin/products", // 唯一值
    icon: React.createElement(ShopOutlined), // 图标
    label: "商品信息", // 显示的文字
    // title: "商品列表", // 收缩之后的悬浮数据
  },
  {
    key: "/admin/product_categories", // 唯一值
    icon: <TeamOutlined />, // 图标
    label: "分类信息", // 显示的文字
  },
  {
    key: "/admin/users", // 唯一值
    icon: <UserOutlined />, // 图标
    label: "用户信息", // 显示的文字
  },
];
// 定义一个全局的母版页
const Layouts = ({ children }: any) => {
  const navigate = useNavigate(); // 做跳转用
  const [isCollapsed, setIsCollapsed] = useState(false);
  return (
    <Layout hasSider style={{ height: "100%" }}>
      <Sider
        collapsed={isCollapsed}
        style={{
          overflow: "auto",
          height: "100vh",
          // position: "fixed",
          left: 0,
          top: 0,
          bottom: 0,
        }}
      >
        <div className="logo" />
        <Menu
          theme="dark"
          mode="inline"
          defaultSelectedKeys={["4"]}
          items={items}
          onClick={({ key }) => {
            // console.log(key);
            navigate(key); // 跳转到对应的页面
          }}
        />
        <div
          style={{
            textAlign: "center",
            position: "absolute",
            bottom: "20px",
            width: "100%",
          }}
        >
          {isCollapsed ? (
            <MenuUnfoldOutlined
              onClick={() => setIsCollapsed(!isCollapsed)}
              style={{ color: "white", fontSize: "1.2rem", cursor: "pointer" }}
            />
          ) : (
            <MenuFoldOutlined
              onClick={() => setIsCollapsed(!isCollapsed)}
              style={{ color: "white", fontSize: "1.2rem", cursor: "pointer" }}
            />
          )}
        </div>
      </Sider>
      <Layout className="site-layout">
        <Header
          className="site-layout-background"
          style={{ padding: "0 8px", fontSize: "1.5rem" }}
        >
          万丰汇城社区交流平台
        </Header>
        <Content style={{ margin: "24px 16px 0", overflow: "initial" }}>
          <div className="site-layout-background" style={{ padding: 24 }}>
            {children}
          </div>
        </Content>
        <Footer style={{ textAlign: "center" }}>
          Ant Design ©2018 Created by Ant UED
        </Footer>
      </Layout>
    </Layout>
  );
};

export default Layouts;
